<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="./Public/Home/css/shopping.css"/>
		<link rel="stylesheet" type="text/css" href="./Public/Home/css/common.css"/>
		<script type="text/javascript" src="./Public/Home/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="./Public/Home/js/land.js"></script>
		<script type="text/javascript">
			{$(function(){
				
				$('.jia').click(function(){
//					js控制input框中的加
					var num = parseInt($(this).siblings('.n').val())+1;
					$(this).siblings('.n').val(num);
//					获得input里的value值
					var value = $(this).siblings('.n').val();
//					alert(value);
//					获得商品下标（names为自定义属性）
					var names = $(this).siblings('.n').attr('names');
					
					var jia = this;
					$.ajax({
						type:"post",
						url:"<?php echo U('./Home/Shopping/pri')?>",
						data:{names:names,value:value},
						dataType:"json",
						success:function(data){
//							获得单个商品的总价格
							var pri = data.pri;
//							获得所有商品的总数量
							var nums = data.nums;
//							获得所有商品的总价格
							var price = data.price;
//							定义空数组
							var all = '';
//							组合字符串
							var str = '<li>商品总数：';
							str += nums + ' 件</li>';
							str += '<li>商品总价：' + price + ' 元</li>';
							str += '<li>优惠节省：0 元</li>';
							str += '<li>合计：<span>' + price + ' 元</span></li>';
							all += str;
//							执行替换
							$('#price').html(all);
//							把单个商品的总价格替换
							$(jia).parents('.goods').find('.price').html('<span class="price">' +pri+ '</span>');
						}
					})
				})
				
				$('.jian').click(function(){
					var num = parseInt($(this).siblings('.n').val())-1;
					if(!num){
						return;
					}
					$(this).siblings('.n').val(num);
					
					
					var names = $(this).siblings('.n').attr('names');

					var value = $(this).siblings('.n').val();
					
					var jian = this;
					
					$.ajax({
						type:"post",
						url:"<?php echo U('./Home/Shopping/pri')?>",
						data:{names:names,value:value},
						dataType:"json",
						success:function(data){
							var pri = data.pri;
							var nums = data.nums;
							var price = data.price;
							var all = '';
							
							var str = '<li>商品总数：';
							str += nums + ' 件</li>';
							str += '<li>商品总价：' + price + ' 元</li>';
							str += '<li>优惠节省：0 元</li>';
							str += '<li>合计：<span>' + price + ' 元</span></li>';
							all += str;
							
							$('#price').html(all);
							$(jian).parents('.goods').find('.price').html('<span class="price">' +pri+ '</span>');
						}
					})
				})
				
				$('.xg').click(function(){
					if(confirm('确定要删除吗？')){
						$(this).parent().remove();
						var names = $(this).attr('names');
//						alert(names);
						$.ajax({
							type:'post',
							url:"<?php echo U('./Home/Shopping/del')?>",
							data:{names:names},
							dataType:"json",
							success:function(data){
								var nums = data.nums;
								var price = data.price;
								var all = '';
								
								var str = '<li>商品总数：';
								str += nums + ' 件</li>';
								str += '<li>商品总价：' + price + ' 元</li>';
								str += '<li>优惠节省：0 元</li>';
								str += '<li>合计：<span>' + price + ' 元</span></li>';
								all += str;
								$('#price').html(all);
							}
						})
					}
				})
				
				$('.username').click(function(){
					if($(this).attr('username') == 0){
						$('.outlogin-box').fadeIn();
						$(this).attr('username','1');
					}else{
						$('.outlogin-box').fadeOut();
						$(this).attr('username','0');
					}
				})
				
//				$('.p').click(function(){
//					$('.p').addClass('p2');
//					$('.p1').addClass('p2');				
//				})
//				
//				$('.p1').click(function(){
//					if($(this).attr("switch") == 0){
//						$(this).addClass('p2');
////						alert($('.foods').length);
//						if(!$('.p1').length){
//							$('.p').addClass('p2');
//						}
//						$(this).attr("switch","1");
//					}else{
//						$(this).removeClass('p2');
//						$('.p').removeClass('p2');
//						$(this).attr("switch","0");
//					}
//					
//				})
			})}
		</script>
	</head>
	<body>
		<!--登录-->
<div class="land">	
	<a href="javascript:;" id="landbottom1" class="landTop landTop1">登录</a>
	<a href="javascript:;" id="landbottom2" class="landTop">注册</a>
	<a href="javascript:;" class="x">×</a>
	<div class="landbottom landbottom1">
		<form action="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=login" method="post">
			<ul>
				<li>
					<span><img src="./Public/Home/images/username.jpg" alt="" /></span>
					<input type="text" name="username" id="" placeholder="请输入手机号" class="user"/>
				</li>
				<li>
					<span><img src="./Public/Home/images/password.jpg" alt="" /></span>
					<input type="password" name="password" id="" placeholder="请输入密码" class="user"/>
				</li>
				<li style="margin-top: 20px;">
					<input type="checkbox" name="" id="" checked="checked"/>
					<sp>自动登录</sp>
				</li>
				<li style="margin-top: 0;">
					<input type="submit" value="登录" class="button"/>
				</li>
			</ul>
		</form>
	</div>
	<div class="landbottom landbottom2">
		<form action="javascript:;" onsubmit="submits(this,'http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=register')" method="post">
			<ul>
				<li>
					<sp>账号：</sp>
					<input type="text" name="username" id="" class="shuru" placeholder="请输入手机号"/>
					<span id="msg"></span>
				</li>
				<li>
					<sp>密码：</sp>
					<input type="password" name="password" id="password" class="shuru" placeholder="请输入密码"/>
				</li>
				<li>
					<sp>确认密码：</sp>
					<input type="password" name="confirmPassword" id="confirmPassword" class="shuru" placeholder="请再次输入密码"/>
					<span class="msg"></span>
				</li>
				<li>
					<sp>验证码：</sp>
					<input type="text" name="" id="code" class="shuru" style="width: 110px;"/>
					<img src="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=code" onclick="this.src = this.src + '&mt=' + Math.random()" alt=""/>
					<span class="code" style="margin-right: 200px;"></span>
				</li>
				<li>
					<input type="checkbox" name="" id="" checked="checked" style="margin-left: 120px;"/>
					<spa>同意联想的 <a href="" style="color: blue;">使用条款</a> 和 <a href="" style="color: blue;">隐私权政策</a></spa>
				</li>
				<li>
					<input type="submit" value="立即注册" class="button"/>
				</li>
			</ul>
		</form>
	</div>
</div>
<div class="zhezhao"></div>

<script type="text/javascript">
	function submits(obj,url){
		var preg = /(\+86)?1[2-9]\d{9}/;
		if(!obj['username'].value.match(preg)){
			alert('用户名不合法');
			return;
		}
		if(obj['confirmPassword'].value != obj['password'].value){
			alert('2次密码不一致');
			return;
		} 
		var data = $(obj).serialize();
		var username = obj['username'].value;
		var password = obj['password'].value;
		var confirmPassword = obj['confirmPassword'].value;
		var code = obj['code'].value;
		$.ajax({
			type:"post",
			url:url,
			data:{username:username,password:password,confirmPassword:confirmPassword,code:code},
			success:function(data){
				var data = $.parseJSON(data);
				if(data.error == 1){
					alert(data.msg);
				}else{
					obj['username'].value = '';
					obj['password'].value = '';
					obj['confirmPassword'].value = '';
					obj['code'].value = '';
					alert(data.msg);
					$('.land').hide();
					$('.zhezhao').hide();
				}
			}
		});
	}
	$(function(){
		$('input[name=username]').blur(function(){
			var preg = /(\+86)?1[2-9]\d{9}/;
			var pregs = $(this).val().match(preg);
			var username = this;
			var uname = $(this).val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=username",
				data:{uname:uname,pregs:pregs},
				dataType:"json",
				success:function(data){
					if(data == 1){
						username.error = 1;
						$('#msg').html('<span style="color:red;">用户名已存在</span>');
					}else{
						username.error = 0;
						$('#msg').html('<span style="color:green;">可以注册</span>');
					}
					if(data == 2){
						username.error = 1;
						$('#msg').html('<span style="color:red;">请输入用户名</span>');
					}
					if(data == 3){
						username.error = 1;
						$('#msg').html('<span style="color:red;">用户名不合法</span>');
					}
				}
			})
		})
			
		$('input[name=confirmPassword]').blur(function(){
			var upassword = this;
			var password = $('#password').val();
			var confirmPassword = $('#confirmPassword').val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=password",
				data:{password:password,confirmPassword:confirmPassword},
				dataType:"json",
				success:function(data){
					if(data == 1){
						confirmPassword.error = 1;
						$('.msg').html('<span style="color:red;">2次密码不一致</span>');
					}else{
						confirmPassword.error = 0;
						$('.msg').html('<span style="color:green;">可以注册</span>');
					}
					if(data == 2){
						confirmPassword.error = 1;
						$('.msg').html('<span style="color:red;">请输入密码</span>');
					}
				}
			})
		})
		
		$('#code').blur(function(){
			var codes = this;
			var code = $(this).val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=codes",
				data:{code:code},
				dataType:"json",
				success:function(data){
					if(data == 1){
						codes.error = 1;
						$('.code').html('<span style="color:red;">请输入验证码</span>');
					}else{
						$('.code').html('<span style="color:green;">验证通过</span>');
					}
					if(data == 2){
						$('.code').html('<span style="color:red;">验证码错误</span>');
					}
				}
			})
		})
	})
</script>
		<!--头部-->
		<div class="top-box">
			<div class="top">
				<div class="top-left">
				</div>
				<div class="top-right">
					<ul class="right-ul">
						<?php if(isset($_SESSION['username'])){?>
                
						<li><a href="javascript:;" class="order">我的订单</a></li>
						<li>
							<a href="javascript:;" class="username" username="0"><?php echo $_SESSION['username']?></a> | 
							<div class="outlogin-box"><a href="<?php echo U('Login/out')?>">退出登录</a></div>
						</li>
						<?php }else{?>
						<li><a href="javascript:;" class="zhuc">注册</a></li>
						<li><a href="javascript:;" class="dengl">登录</a> | </li>
						
               <?php }?>
						<li><a href="<?php echo U('Index/index')?>">返回首页</a> | </li>
					</ul>
				</div>
			</div>
		</div>
		<!--索引-->
		<div class="logo">
			<div class="logo-left">
				<a href=""><div></div></a>
			</div>
			<div class="logo-right">
				<img src="./Public/Home/images/process1.jpg" alt="" />
			</div>
		</div>
		<!--结算-->
		<div class="jiesuan">
			<div class="jieTop">
				<t>
					<a href="javascript:;"><p class="p"></p></a>
					<label for="xuan">全选</label>
					<d>商品</d>
				</t>
				<b>规格</b>
				<b>单价</b>
				<b>数量</b>
				<b>金额</b>
				<b>操作</b>
			</div>
			<div class="jieCenter">
				<?php foreach ($data as $k=>$v){?>
				<div class="goods">
					<a href="javascript:;" class="img"><p class="p1" switch="0"></p></a>
					<a href="" class="fImg"><img src="./Public/Home/images/m.jpg" alt="" style="width: 115px;"/></a>
					<div class="foodsName">
						<a href=""><?php echo $v['name']?></a>
						<br />
						<a href=""><img src="./Public/Home/images/fuwu.jpg" alt="" />购买联想服务</a>
					</div>
					<div class="guige">
						<?php foreach ($v['options'] as $key=>$value){?>
						<span><?php echo $key?>：<?php echo $value?></span>&nbsp;&nbsp;
						<?php }?>
					</div>
					<div class="pri"><span><?php echo $v['price']?></span></div>
					<div class="num">
						<input type="button" value="-" id="" class="j jian"/>
						<input type="text" name="" readonly="" value="<?php echo $v['num']?>" names="<?php echo $k?>" class="numBox n"/>
						<input type="button" value="+" id="" class="j jia"/>
					</div>
					<div class="pri" style="color: #E2231A;"><span class="price"><?php echo $v['total']?></span></div>
					<a href="javascript:;" names="<?php echo $k?>" class="xg"><b></b></a>
				</div>
				<?php }?>
			</div>
			<div class="jieBottom">
				<t>
					<a href="javascript:;"><p class="p"></p></a>
					<label for="xuan">全选</label>
					<a href="<?php echo U('Home/Shopping/emptycart')?>" class="emptycart">清空购物车</a>
				</t>
				<ul id="price">
					<li>商品总数：<?php echo $num?> 件</li>
					<li>商品总价：<?php echo $price?> 元</li>
					<li>优惠节省：0 元</li>
					<li>合计：<span><?php echo $price?> 元</span></li>
				</ul>
			</div>
			<div class="jieSuan">
				<a href="<?php echo U('Clear/index')?>">去结算</a>
			</div>
		</div>
		<!--尾部-->
<div class="wb">
	<div>
		<img src="./Public/Home/images/wb.jpg" alt="" />
	</div>
</div>
<!--尾部-->
<div class="weibu">
	<div>
		<ul>
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
	</div>	
</div>
<div class="dibu">
	<div>
		<a href="">关于联想</a>
		<span> | </span>
		<a href="">联系我们</a>
		<span> | </span>
		<a href="">工作机会</a>
		<span> | </span>
		<a href="">新闻中心</a>
		<span> | </span>
		<a href="">聚享汇会员专享</a>
		<span> | </span>
		<a href="">ZUK官网</a>
		<span> | </span>
		<a href="">联想社区</a>
		<span> | </span>
		<a href="">NBD</a>
		<span> | </span>
		<a href="">懂的通信</a>
		<span> | </span>
		<a href="">联想超融合</a>
		<span> | </span>
		<a href="">销售网点</a>
		<span> | </span>
		<a href="">服务网点</a>
		<p></p>
		<a href="">版权所有：1998-2016 联想集团</a>
		<span> | </span>
		<a href="">法律公告</a>
		<span> | </span>
		<a href="">隐私保护</a>
		<span> | </span>
		<a href="">京ICP备11035381</a>
		<span> | </span>
		<a href="">京公网安备110108007970号</a>
		<span> | </span>
		<a href="">营业执照：110000410127232</a>
	</div>
</div>
	</body>
</html>
